<template>
    <div class="container list" v-loading="loading">
        <div style="display: flex;margin: 6px 0;">
            <el-select v-model="page.searchName" placeholder="分配对象" :remote-method="remoteMethod" filterable
                @change="pickerChange" remote>
                <el-option v-for="item in UserArr" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
            </el-select>
            <div>
                <span style="margin:  0 10px;">起止时间</span>
                <el-date-picker v-model="page.time" type="daterange" start-placeholder="开始时间" @change="pickerChange"
                    end-placeholder="结束时间" :default-value="[new Date(), new Date()]" />
            </div>
        </div>
        <div>
            <el-table :data="TableData">
                <template v-for="item in TableColumn" :key="item.prop">
                    <el-table-column v-if="item.prop == 'CreatedAt'" :label="item.label">
                        <template v-slot="scope">
                            {{ dateFormat(scope.row[item.prop], 'yyyy-MM-dd HH:mm:ss') }}
                        </template>
                    </el-table-column>
                    <el-table-column v-else :prop="item.prop" :label="item.label"></el-table-column>
                </template>
            </el-table>
        </div>
        <div style="margin: 10px 0;display: flex;justify-content: flex-end;">
            <el-pagination v-model:current-page="page.pageNum" v-model:page-size="page.pageSize" :small="true"
                :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup>
import { ref, unref } from 'vue';
import { debounce } from 'lodash'
import { httpGet, httpPost } from '@/utils/http'
import { onMounted } from 'vue';
import { dateFormat } from '@/utils/libs';

const arr = [
    {
        userName: '张三',
        createTime: '2021-01-01',
        remarks: '无',
        surplusCount: 5,
        allocationCount: 2,
        createUser: '管理员A',
        adminCount: 3
    },
    {
        userName: '李四',
        createTime: '2021-01-02',
        remarks: '备注信息',
        surplusCount: 7,
        allocationCount: 4,
        createUser: '管理员B',
        adminCount: 6
    },
    {
        userName: '王五',
        createTime: '2021-01-03',
        remarks: '其他信息',
        surplusCount: 3,
        allocationCount: 1,
        createUser: '管理员A',
        adminCount: 2
    },
    {
        userName: '赵六',
        createTime: '2021-01-04',
        remarks: '备注内容',
        surplusCount: 10,
        allocationCount: 3,
        createUser: '管理员C',
        adminCount: 8
    },
    {
        userName: '田七',
        createTime: '2021-01-05',
        remarks: '备注',
        surplusCount: 6,
        allocationCount: 2,
        createUser: '管理员D',
        adminCount: 4
    },
    {
        userName: '刘八',
        createTime: '2021-01-06',
        remarks: '备注信息',
        surplusCount: 9,
        allocationCount: 5,
        createUser: '管理员E',
        adminCount: 7
    },
    {
        userName: '陈九',
        createTime: '2021-01-07',
        remarks: '其他备注',
        surplusCount: 4,
        allocationCount: 1,
        createUser: '管理员D',
        adminCount: 3
    },
    {
        userName: '郑十',
        createTime: '2021-01-08',
        remarks: '其他信息',
        surplusCount: 8,
        allocationCount: 3,
        createUser: '管理员F',
        adminCount: 5
    },
    {
        userName: '周十一',
        createTime: '2021-01-09',
        remarks: '备注内容',
        surplusCount: 11,
        allocationCount: 4,
        createUser: '管理员G',
        adminCount: 9
    },
    {
        userName: '吴十二',
        createTime: '2021-01-10',
        remarks: '备注',
        surplusCount: 7,
        allocationCount: 2,
        createUser: '管理员H',
        adminCount: 6
    }
]
const loading = ref(false)
const UserArr = ref([])
const TableColumn = ref([{
    label: '分配用户',
    prop: 'UserName'
}, {
    label: '备注',
    prop: 'remarks'
}, {
    label: '用户分配前次数',
    prop: 'UserCallsBefore'
}, {
    label: '分配次数',
    prop: 'CallsChange'
}, {
    label: '用户剩余次数',
    prop: 'UserCallsAfter'
}, {
    label: '分配人',
    prop: 'createUser'
}, {
    label: '管理剩余次数',
    prop: 'DealerAllocCallsAfter'
} ,{
    label: '分配时间',
    prop: 'CreatedAt'
}
])
const TableData = ref([])
// TableData.value = arr
const page = ref({
    pageSize: 10,
    pageNum: 1,
    total: 100,
    searchName: '',
    time: [, ],
    start_time: '',
    end_time: ''
})
const getData = () => {
    // console.log(page.time,unref(page.time));
    if (unref(page).time[0]) {
        page.value.start_time = dateFormat(unref(page).time[0], 'yyyy-MM-dd HH:mm:ss')
        page.value.end_time = dateFormat(unref(page).time[1], 'yyyy-MM-dd HH:mm:ss')
    }

    if (unref(page).searchName) {
        page.value.userid = unref(page).searchName
    }
    httpPost(`api/admin/user/getAllocLogs?page=${unref(page).pageNum}&page_size=${unref(page).pageSize}`, unref(page)).then(data => {
        const res = data.data
        TableData.value = res.items
        page.value.total = res.total
        page.value.pageNum = res.page
        page.value.pageSize = res.page_size
    })
}
const handleSizeChange = (v) => {
    console.log(v, unref(page))
    getData()
}
const handleCurrentChange = (v) => {
    console.log(v, unref(page))
    getData()
}
const pickerChange = (v) => {
    console.log(v);
    getData()
}
const remoteMethod = debounce((v) => {
    if (v == '') {
        UserArr.value = []
        return
    }
    httpGet('/api/admin/user/list', { username: v }).then((res) => {
        if (res.data) {
            // console.log(res.data.items, '==');
            // 初始化数据
            const arr = res.data.items;

            UserArr.value = arr.map(item => {
                return {
                    label: item.username,
                    value: item.id
                }
            })
            // for (let i = 0; i < arr.length; i++) {
            //     arr[i].expired_time = dateFormat(arr[i].expired_time)
            // }
            // users.value.items = arr
            // users.value.total = res.data.total
            // users.value.page = res.data.page
            // user.value.page_size = res.data.page_size
        }
        loading.value = false
    })
}, 500)
onMounted(() => {
    getData()
})
</script>